<template>
<view>
  <!-- 充电桩信息弹窗 -->
  <u-popup :show="devicePopup" :closeable="true" @close="chargingManager">
    <view class="submitBox">
      <view class="submitBox-title">当前使用 </view>
      <view class="tips-text">充电功能正在试运行阶段，如有问题请拨打服务热线
        <text @click="callPhone(chargeHotline[0])">{{ chargeHotline }}</text>
      </view>
      <view class="submitBox-content">
        <view class="submitBox-list">
          <view class="list-left">电站</view>
          <view class="list-right">{{chargingData.stationRespVO.stationName}}</view>
        </view>
        <view class="submitBox-list">
          <view class="list-left">充电桩编号</view>
          <view class="list-right">{{chargingData.equipmentRespVO.equipmentId}}</view>
        </view>
        <view class="submitBox-list">
          <view class="list-left">类型</view>
          <view class="list-right">
            <span v-if="chargingData.equipmentRespVO.equipmentType == 1">直流设备</span>
            <span v-else-if="chargingData.equipmentRespVO.equipmentType == 2">交流设备</span>
            <span v-else-if="chargingData.equipmentRespVO.equipmentType == 3">交直流一体设备</span>
            <span v-else-if="chargingData.equipmentRespVO.equipmentType == 4">无线设备</span>
            <span v-else>其他</span>
          </view>
        </view>
        <view class="tips-text-back">请先确认充电设备枪口已与车辆连接，再点击“确认”启动充电</view>
      </view>
      <view class="sure" @click="handleSureCharge">确认</view>
    </view>
  </u-popup>
  <!-- 余额提示 -->
  <u-popup :show="balancePopup" :closeable="true" @close="balancePopup = false">
    <view class="balanceBox">
      <view class="balance-content">当前可用额度总计小于10元，是否充值</view>
      <view class="tips-text-back-2">请先充值，确保额度高于10元，避免影响您正常充电</view>
      <view class="buttonBox">
        <view class="continue" @click="handleContinueCharging">继续充电</view>
        <view class="recharge" @click="rechargeMoney">充值</view>
      </view>
    </view>
  </u-popup>
</view>
</template>
  
<script>
import {  showLoading, hideLoading, requestSubscribeMessage} from '../common/uniapi.js'
import { chargePileStartApi, chargeStationEquipmentApi, chargeWhitelistOneselfApi } from "../api/chargingManager/index"
import { getIcsHotline } from "@/api/park/home"
export default {
  data(){
    return{
      // 信息弹框
      devicePopup: false,
      // 充电桩详情数据
      chargingData:{},
      // 余额弹框
      balancePopup:false,
      // 余额
      balanceNum: 0,

      // 充电桩id
      connectorId: 0,
      chargeHotline: ''
    }
  },
  onLoad(options){
    // 微信扫码进来的
    this.connectorId = options.scene.replace('%253A',':').replace('%3A',':')

    // 登陆-弹出去登录按钮
    if (this.hasLogin) {
      this.getCurrentCharging()
      this.getIcsHotlineList()
      this.devicePopup = true
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    },
    hasLogin() {
      return this.$store.getters.hasLogin
    }
  },
  methods:{
    /**获取服务热线电话*/
    getIcsHotlineList(){
      getIcsHotline().then(res=>{
        const data = res.data
        this.chargeHotline = data['charge'] || ''
      })
    },
    /**获取当前充电桩数据*/
    getCurrentCharging(){
      chargeStationEquipmentApi({connectorId: this.connectorId}).then(res=>{
        this.chargingData = res.data
      })
    },
    // 返回充电管家
    chargingManager(){
      const pages = getCurrentPages()
      
      if (pages.length > 1){
        uni.navigateBack({
          delta: 1
        })
      }else {
         //TODO: 返回首页路由地址 待替换
        uni.switchTab({ url: '/pages/park/home/index' })
      }
      this.devicePopup = false
    },
    /**处理确认充电*/
    handleSureCharge(){
      this.getChargeWhitelistOneself()
    },
    /**查询充电白名单*/
    getChargeWhitelistOneself(){
      showLoading()
      chargeWhitelistOneselfApi().then(res=>{
        hideLoading()

        const {type, amount, warningAmount, whitelistAmount, userAmount} = res.data
        this.balanceNum = amount
        // 免费白名单
        if (type == 1) {
          this.continueCharging()
          return
        }
        // 黑名单操作
        if (type == 4){
          uni.$u.toast('您暂时无法充电，请联系管理人员')
          return
        }

        // 白名单操作
        this.handleIfAccountBalance()
        // 
      }).catch(err => {
        hideLoading()
        uni.$u.toast(err.data.msg)
      })
    },
    /**处理判断跳转账户余额*/
    handleIfAccountBalance(){
      // 余额小于10提醒充值
      if (this.balanceNum > 10) {
        this.continueCharging()
        return
      } 
      this.balancePopup = true
    },
    /**处理继续充电*/
    handleContinueCharging(){
      if (this.balanceNum <= 0) return uni.$u.toast('当前余额不足，请先充值')
      this.continueCharging()
    },
    /**继续充电*/ 
    continueCharging(){
      let _this = this
      const tmplIds = ['Eoug6tKSU41Xb_nhX4C00G_LjglQpFmQRSZF67ahvJE']
      requestSubscribeMessage(tmplIds,()=>{
        _this.handleChargePileStart()
      })
    },
    /**处理启动充电接口调用*/
    handleChargePileStart(){
      showLoading()
      chargePileStartApi({connectorId: this.connectorId}).then(res=>{
        hideLoading()
          uni.redirectTo({
            url: `/pages/charging/chargingManager/chargingStart?startChargeSeq=${startChargeSeq}`
          })
      }).catch(err => {
        hideLoading()
        uni.$u.toast(err.data.msg)
      })
    },
    // 充值
    rechargeMoney(){
      console.log(this.connectorId);
      uni.redirectTo({
        url: `/pages/charging/chargingManager/accountBalance?connectorId=${this.connectorId}`
      })
    },
    /**拨打电话*/
    callPhone(phone){
      wx.makePhoneCall({
        phoneNumber: phone,
        success: function() {
          
        },
        fail: function() {
          
        }
      })
    },
  }
}
</script>

<style lang="less" scope>
.submitBox{
  width: 100%;
  // height: 310px;
  padding: 15px;
  border-radius: 24px 24px 0 0;
  background-color: #fff;
  box-sizing: border-box;
}
.submitBox-title{
  font-size: 16px;
  font-weight: 600;
}
.submitBox-content{
  margin-bottom: 25px;
  width: 100%;
  min-height: 140px;
  background: #FBFBFB;
  border-radius: 8px 8px 8px 8px;
  box-sizing: border-box;
  padding: 15px 10px;
  font-size: 14px;
  line-height: 30px;
  margin-top: 15px;
}
.submitBox-list{
  width: 100%;
  display: flex;
}
.list-left{
  width: 70px;
  color: #767676;
  margin-right: 6px;
}
.list-right{
  width: calc(100% - 90px);
}
.sure{
  width: 92%;
  box-sizing: border-box;
  height: 40px;
  margin: 8px auto;
  text-align: center;
  color: #fff;
  line-height: 40px;
  box-sizing: border-box;
  background: #4c75fe;
  border-radius: 6px;
  margin: 0px 14px 0 14px;
  border-radius: 20px;
}
.buttonBox{
  display: flex;
  justify-content: space-between;
}
.balanceBox{
  width: 100%;
  height: 350px;
  padding: 30px;
  border-radius: 24px 24px 0 0;
  background-color: #fff;
  box-sizing: border-box;
}
.balance-content{
  font-size: 16px;
  text-align: center;
  line-height: 165px;
}
.continue{
  width: 140px;
  height: 48px;
  border-radius: 87px 87px 87px 87px;
  text-align: center;
  line-height: 48px;
  border: 1px solid #557EFF;
  color: #557EFF;
  margin-right: 35px;
}
.recharge{
  width: 140px;
  height: 48px;
  border-radius: 87px 87px 87px 87px;
  text-align: center;
  line-height: 48px;
  background: #557EFF;
  color: #fff;
}
/deep/ .u-popup__content {
  background-color: #fff;
  position: relative;
  border-radius: 20px;
}

.tips-text {
  margin-top: 8px;
  font-size: 12px;
  // color: #767676;
  color: red;
}
.tips-text-back {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 400;
  color: #FC8800;
  line-height: 18px;
  box-sizing: border-box;
}
.tips-text-back-2 {
  margin-bottom: 15px;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  color: #FC8800;
  line-height: 18px;
  box-sizing: border-box;
}
</style>